<template>
  <view class="custom-tabbar">
    <view
      class="tabbar-item" 
      v-for="(item, index) in tabbarList" 
      :key="index"
      @click="switchTab(item, index)"
      :class="{ 'active': activeIndex === index }"
    >
      <image 
        :src="activeIndex === index ? item.selectedIconPath : item.iconPath" 
        class="tabbar-icon"
        :class="{ 'active-icon': activeIndex === index }"
      ></image>
      <text 
        class="tabbar-text" 
        :class="{ 'active-text': activeIndex === index }"
      >
        {{ item.text }}
      </text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomTabbar',
  data() {
    return {
      color: '#999999',
      selectedColor: '#FF9900',
      activeIndex: 0,
      tabbarList: [
        {
          text: "主页",
          pagePath: "/pages/home/index",
          iconPath: "/static/tabbar/home.png",
          selectedIconPath: "/static/tabbar/homed.png"
        },
        {
          text: "模型切换",
          pagePath: "/pages/tab/assistant",
          iconPath: "/static/tabbar/model.png",
          selectedIconPath: "/static/tabbar/modeld.png"
        },
        {
          text: "个人中心",
          pagePath: "/pages/mine/mine",
          iconPath: "/static/tabbar/mine.png",
          selectedIconPath: "/static/tabbar/mined.png"
        }
      ]
    }
  },
  created() {
    // 获取当前页面路径，设置激活状态
    this.setActiveTab()
  },
  methods: {
    setActiveTab() {
      const pages = getCurrentPages();
      const currentPage = pages[pages.length - 1];
      const route = '/' + currentPage.route;
      
      this.tabbarList.forEach((item, index) => {
        if (item.pagePath === route) {
          this.activeIndex = index;
        }
      });
    },
    switchTab(item, index) {
      if (this.activeIndex !== index) {
        this.activeIndex = index;
        uni.switchTab({
          url: item.pagePath
        });
      }
    },
    updateActiveTab() {
      this.setActiveTab();
    }
  }
}
</script>

<style scoped>
.custom-tabbar{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(90deg, #f9f9f9 0%, #ffffff 100%);
  display: flex;
  z-index: 999;
  padding: 5px 0;
  width: 100%;
  margin: 0 auto;
  box-shadow: -1px 1px 20px 5px #ccc;
  box-sizing: border-box;
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: all 0.3s ease;
}

.tabbar-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
  transition: all 0.3s ease;
}

.tabbar-text {
  font-size: 12px;
  color: #999999;
  transition: all 0.3s ease;
}

.active-icon {
  transform: scale(1.1);
}

.active-text {
  color: #FF9900;
  font-weight: 500;
}

/* 添加选中时的背景效果 */
.tabbar-item:after {
  content: '';
  position: absolute;
  top: -10rpx;
  width: 60rpx;
  height: 6rpx;
  background: linear-gradient(90deg, #FFD700, #FFA500);
  border-radius: 0 0 10rpx 10rpx;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tabbar-item.active:after {
  opacity: 1;
}
</style>